<!--
    @Title: MeshBox
    @Author  dudalei
    @Package
    @Date  2025/5/10 00:59
    @description: 这里是测试
-->
<script setup lang="ts">
import { BoxGeometry, DoubleSide, Mesh, MeshLambertMaterial } from 'three'
import { inject } from 'vue'
import { AmapAndThreeInjectKey } from '@/components/AmapThree/index.ts'
const mapStore = inject(AmapAndThreeInjectKey)

function addMesh() {
  if (!mapStore) {
    return
  }

  const { scene, map, onRender } = mapStore

  const data = map.customCoords.lngLatsToCoords([[121.5, 31.24]])
  //  这里可以使用 three 的各种材质
  const mat = new MeshLambertMaterial({
    side: DoubleSide,
    color: 0x1e2f97,
    transparent: true,
    opacity: 0.4,
    depthWrite: false,
  })
  const geo = new BoxGeometry(1200, 1200, 1200)
  const d = data[0]
  const mesh = new Mesh(geo, mat)
  mesh.position.set(d[0], d[1], 500)
  scene.add(mesh)
  // animate()
  // 这里执行动画
  onRender(() => {
    mesh.rotateZ((1 / 180) * Math.PI)
  })
}

mapStore?.setup(addMesh)
</script>

<template>
  <div v-if="false"></div>
</template>

<style scoped></style>
